<template>
  <span>
    <span class="color-primary common-cursor" @click="handleDetails"> <slot /></span>
    <model-dialog
      :visible.sync="detailsVisible"
      title="会员详情"
      :width="'90%'"
      @close="detailsVisible=!detailsVisible">
      <template>
        <div class="member-details-container details-container-theme1">
          <el-form
            ref="dataForm"
            :model="memberUserRecord"
            label-position="right"
            label-width="120px">
            <div class="left-container">
              <div class="base-info-container">
                <img
                  :src="common.getFileView(memberUserRecord.avatar)"
                  data-default="avatar"
                  style="margin-left:5px;margin-right:5px;vertical-align: middle;"
                  @error="handleImageError">
                <div class="base__info__container">
                  <div class="base__info__item">
                    <div class="title">{{ memberUserRecord.realName?memberUserRecord.realName:'-' }}</div>
                    <el-tag v-if="memberUserRecord.isLocked===0" effect="dark" class="status-item">正常</el-tag>
                    <el-tag v-if="memberUserRecord.isLocked===1" effect="dark" class="status-item" type="danger">锁定</el-tag>
                  </div>
                  <div class="base__info__item" style="flex-direction:column">
                    <el-row>
                      <el-col :span="12" class="text-item">
                        <div class="label">用户名:</div>
                        <div class="value">{{ memberUserRecord.userName }} </div>
                      </el-col>
                      <el-col :span="12" class="text-item">
                        <div class="label">手机:</div>
                        <div class="value">{{ memberUserRecord.mobile }} </div>
                      </el-col>
                      <el-col :span="12" class="text-item">
                        <div class="label">来源:</div>
                        <div class="value">
                          <span v-if="memberUserRecord.comeSources===0">后台</span>
                          <span v-else-if="memberUserRecord.comeSources===1">微信</span>
                          <span v-else-if="memberUserRecord.comeSources===2">APP</span>
                          <span v-else-if="memberUserRecord.comeSources===3">小程序</span>
                          <span v-else-if="memberUserRecord.comeSources===6">门户</span>
                          <span v-else>未知</span>
                        </div>
                      </el-col>
                      <el-col :span="12" class="text-item">
                        <div class="label">余额:</div>
                        <div class="value">
                          <span class="color-danger" style="font-size: 15px;font-weight: bold;">{{ memberUserRecord.wallet |formatPrice }}</span>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </div>
                <div class="tool" />
              </div>
              <div class="detail-info-container">
                <el-tabs v-model="activeName" class="common-tabs" @tab-click="handleTabClick">
                  <el-tab-pane label="三方绑定" name="bind" />
                  <el-tab-pane label="钱包记录" name="wallet" />
                  <el-tab-pane label="提现记录" name="withdrawal" />
                  <el-tab-pane label="会员订单" name="orderHeader" />
                </el-tabs>
                <el-table
                  v-if="activeName==='bind'"
                  :data="memberUserBinds"
                  header-cell-class-name="table-header"
                  fit
                  height="100%"
                  highlight-current-row>
                  <el-table-column type="selection" width="60" />
                  <el-table-column align="center" prop="id" label="#" width="60">
                    <template slot-scope="scope">{{ scope.$index+1 }}</template>
                  </el-table-column>
                  <el-table-column :show-overflow-tooltip="true" label="头像" prop="bindAvatar" width="70" align="center">
                    <template slot-scope="scope">
                      <img :src="common.getFileView(scope.row.bindAvatar)" class="common-round-image-32" data-default="avatar" @error="handleImageError">
                    </template>
                  </el-table-column>
                  <el-table-column prop="bindKey" label="渠道" width="100" show-overflow-tooltip />
                  <el-table-column prop="appId" label="应用" width="150" show-overflow-tooltip />
                  <el-table-column prop="bindNickName" label="昵称" width="100" show-overflow-tooltip />
                  <el-table-column :show-overflow-tooltip="true" label="openId" prop="bindValue" min-width="260" />
                  <el-table-column prop="bindTime" sortable label="修改时间" width="160">
                    <template slot-scope="scope">{{ scope.row.bindTime | formatDate }}</template>
                  </el-table-column>
                </el-table>
                <template v-if="activeName==='wallet'">
                  <walletChange :member-id="memberUserRecord.id" />
                </template>
                <template v-if="activeName==='withdrawal'">
                  <withdrawal :member-id="memberUserRecord.id" />
                </template>
                <template v-if="activeName==='orderHeader'">
                  <orderHeader :member-id="memberUserRecord.id" />
                </template>
              </div>
            </div>

            <div class="right-container">
              <div class="common-title m-b-20"><h2 class="bold">会员信息</h2></div>
              <el-form-item label="注册时间:" class="right"> {{ memberUserRecord.gmtCreated | formatDate }}</el-form-item>
              <el-form-item label="昵称:" class="right"> {{ memberUserRecord.nickName }}</el-form-item>
              <el-form-item label="邮箱:" class="right"> {{ memberUserRecord.email }}</el-form-item>
              <el-form-item label="个性签名:" class="right"> {{ memberUserRecord.signature }}</el-form-item>
              <el-form-item label="简介:" class="right"> {{ memberUserRecord.introduction }}</el-form-item>
              <el-form-item label="地区:" class="right"> {{ memberUserRecord.region| regionFormat }} {{ memberUserRecord.address }}</el-form-item>
              <el-form-item label="最后登录IP:" class="right"> {{ memberUserRecord.lastLoginIp }}</el-form-item>
              <el-form-item label="最后登录时间:" class="right">  {{ memberUserRecord.lastLoginTime | formatDate }} </el-form-item>
              <el-form-item label="最后登录地址:" class="right">  {{ memberUserRecord.lastLoginAddress }} </el-form-item>
            </div>
          </el-form>
        </div>
      </template>
    </model-dialog>
  </span>
</template>
<script>
import walletChange from '@/views/member/components/walletChange'
import withdrawal from '@/views/member/components/withdrawal'
import orderHeader from '@/views/member/components/orderHeader'

export default {
  components: { walletChange, withdrawal, orderHeader },
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      activeName: 'bind',
      memberUserRecord: {},
      memberUserBinds: [],
      detailsVisible: false
    }
  },
  methods: {
    /* 详情*/
    handleDetails() {
      this.activeName = 'bind'
      this.$store.dispatch('memberUserGetDetailsById', this.id).then(res => {
        this.memberUserRecord = res.memberUser
        this.memberUserBinds = res.binds
        this.detailsVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      }).catch((_) => {

      })
    }
  }
}
</script>
